<template>
  <div class="total">
    <div class="staff-information" v-if="peopledetail">
      <h1>员工信息</h1>
      <table>
        <tr>
          <td>员工姓名</td>
          <td>{{ peopledetail[0].goodsName }}</td>
          <td>性别</td>
          <td>{{ peopledetail[0].goodsSex ? "女" : "男" }}</td>
          <td>年龄</td>
          <td>{{ peopledetail[0].goodsAge }}</td>
        </tr>
        <tr>
          <td>身份证号</td>
          <td>{{ peopledetail[0].goodsCart }}</td>
          <td>民族</td>
          <td>{{ peopledetail[0].goodsNation }}</td>
          <td>联系方式</td>
          <td>{{ peopledetail[0].goodsPhone }}</td>
        </tr>
        <tr>
          <td>部门</td>
          <td>{{ peopledetail[0].goodsPart }}</td>
          <td>职位</td>
          <td>{{ peopledetail[0].goodsPart1 }}</td>
          <td>员工编号</td>
          <td>{{ peopledetail[0].goodsId }}</td>
        </tr>
        <tr>
          <td>联系人</td>
          <td>陈运通</td>
          <td>开户银行</td>
          <td>{{ peopledetail[0].goodsBank }}</td>
          <td>银行卡号</td>
          <td>{{ peopledetail[0].goodsBankCart }}</td>
        </tr>
        <tr>
          <td>入职时间</td>
          <td>{{ peopledetail[0].goodsDate }}</td>
          <td>工作时长</td>
          <td>{{ peopledetail[0].goodsTime }}天</td>
          <td>*</td>
          <td>*</td>
        </tr>
      </table>
    </div>
    <div class="salary-count">
      <div id="main" :style="{ height: '340px' }"></div>
      <div class="attendance">
        <table>
          <tr>
            <td>请假（天）</td>
            <td>工作时长</td>
            <td>售出单数</td>
          </tr>
          <tr>
            <td>0</td>
            <td>12</td>
            <td>50</td>
          </tr>
          <tr>
            <td>提成</td>
            <td>五险一金</td>
            <td>薪资</td>
          </tr>
          <tr>
            <td>1000</td>
            <td>180</td>
            <td>2220</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, ref, onBeforeUnmount } from "vue";
import { indexApi } from "@/api/api";
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
});
let people = ref<any>();
let peopledetail = ref<any>();
let myChart: any;
onMounted(async () => {
  // echarts
  myChart = echarts.init(document.getElementById("main") as HTMLCanvasElement);
  myChart.setOption({
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
      name: "薪资架构",
      min: 10,
      max: 50,
      position: "left",
      axisLabel: {
        formatter: "{value} 单",
      },
    },
    series: [
      {
        name: "薪资架构",
        type: "line",
        // yAxisIndex: 0,
        data: [16, 30, 20, 50, 25, 30, 26],
        areaStyle: {},
      },
    ],
  });
  //请求数据
  people.value = await indexApi({ data: "data" });
  peopledetail.value = people.value.data.filter((va: any) => {
    // console.log(va.goodsId);
    // console.log(props.id);
    if (va.goodsId == props.id) {
      return va;
    }
  });
});
onBeforeUnmount(() => {
  myChart.dispose(); // 销毁echarts实例, 都会减少内存占用
});
</script>

<style lang="less" scoped>
.total {
  width: 1129px;
  height: 100%;
  margin: 10px 10px 0px 10px;
  padding-bottom: 1px;
  background-color: #b4dbe7;
  border: 1px solid #72a7c9;
  // box-sizing: border-box;
  // padding: 10px 10px 10px 10px;
}

.staff-information {
  h1 {
    font-size: 16px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #000000;
    line-height: 47px;
    margin: 0px 0px 0px 70px;
  }

  table {
    background-color: #72a7c9;
    margin-left: 70px;

    tr {
      td {
        width: 167px;
        height: 39px;
        border: 1px solid #010101;
        text-align: center;
        line-height: 38px;
        font-size: 14px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #464646;
      }
    }
  }
}

.salary-count {
  width: 1003px;
  height: 340px;
  margin: 10px 0px 10px 70px;
  display: flex;

  #main {
    border: 1px solid #000000;
    flex: 2;
    margin-right: 10px;
    background-color: #72a7c9;
  }

  .attendance {
    border: 1px solid #000000;
    flex: 1;
    background-color: #72a7c9;

    table {
      tr {
        td {
          width: 110px;
          height: 84px;
          border: 1px solid #7e7d7d;
          text-align: center;
          font-size: 14px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: #464646;
        }
      }
    }
  }
}
</style>
